<div class="root-container">
    <img style="width:50px;height:50px;margin-left: 48%;" (click)="toDashboard()"
        src="../../../assets/images/icon-dash.png" alt="">
    <div class="op_btn prev_btn lunpan-container" (click)="lunpan.doChange('prve')"></div>
    <div class="op_btn next_btn" (click)="lunpan.doChange('next')"></div>
    <div *ngIf="isIE; else notflag">

        <div class='row' style="margin-left:500px;margin-top: 150px">
            <div (click)="toShop('GF9')" class="ie_box"
                style="display: inline-block;margin-right: 50px;font-size: 30px;margin:0 auto;width: 300px;height: 150px; ">
                <div>
                    GF9：{{gf9Prod1.jph? gf9Prod1.jph:'0'}}/
                    <span [ngStyle]="{'color':gf9Prod1.hours >= gf9Prod1.jph?'#0f0':'#f00'}">
                        {{gf9Prod1.hours? gf9Prod1.hours:'0'}}
                    </span>
                </div>
                <img class="modification" src="../../../assets/images/modification3.png" alt="">
            </div>
            <div (click)="toShop('CSS1')" class="ie_box"
                style="display: inline-block;margin-left: 50px;font-size: 30px;width: 300px;height: 150px;">
                <div>
                    CSS1：{{cssProd1.jph? cssProd1.jph:'0'}}/
                    <span [ngStyle]="{'color':cssProd1.hours >= cssProd1.jph?'#0f0':'#f00'}">
                        {{cssProd1.hours? cssProd1.hours:'0'}}
                    </span>
                </div>
                <img class="modification" src="../../../assets/images/CSS1.png" alt="">
            </div>
            <div (click)="toShop('CSS5')" class="ie_box"
                style="display: inline-block;margin-left: 50px;font-size: 30px;width: 300px;height: 150px;">
                <div>
                    CSS5：{{css5Prod1.jph? css5Prod1.jph:'0'}}/
                    <span [ngStyle]="{'color':css5Prod1.hours >= css5Prod1.jph?'#0f0':'#f00'}">
                        {{css5Prod1.hours? css5Prod1.hours:'0'}}
                    </span>
                </div>
                <img class="modification" src="../../../assets/images/CSS5.png" alt="">
            </div>
        </div>
        <div class="row" style="margin-top: 200px;margin-left:500px">
            <div (click)="toShop('BEV3')" class="ie_box"
                style="display: inline-block;margin-right: 50px;font-size: 30px;margin:0 auto;width: 300px;height: 150px;">
                <div>
                    BEV3：{{bev3Prod1.jph? bev3Prod1.jph:'0'}}/
                    <span [ngStyle]="{'color':bev3Prod1.hours >= bev3Prod1.jph?'#0f0':'#f00'}">
                        {{bev3Prod1.hours? bev3Prod1.hours:'0'}}
                    </span>
                </div>
                <img class="modification" src="../../../assets/images/BEV3.png" alt="">
            </div>
            <div (click)="toShop('HEV2')" class="ie_box"
                style="display: inline-block;margin-left: 50px;font-size: 30px;width: 300px;height: 150px;">
                <div>
                    HEV2：{{hevProd1.jph? hevProd1.jph:'0'}}/
                    <span [ngStyle]="{'color':hevProd1.hours >= hevProd1.jph?'#0f0':'#f00'}">
                        {{hevProd1.hours? hevProd1.hours:'0'}}
                    </span>
                </div>
                <img class="modification" src="../../../assets/images/NCXB.png" alt="">
            </div>
            <div (click)="toShop('GFE2')" class="ie_box"
                style="display: inline-block;margin-left: 50px;font-size: 30px;width: 300px;height: 150px;">
                <div>
                    GFE2：{{gfeProd1.jph? gfeProd1.jph:'0'}}/
                    <span [ngStyle]="{'color':gfeProd1.hours >= gfeProd1.jph?'#0f0':'#f00'}">
                        {{gfeProd1.hours? gfeProd1.hours:'0'}}
                    </span>
                </div>
                <img class="modification" src="../../../assets/images/GFE.png" alt="">
            </div>
            <!-- phev 新增 -->
            <div (click)="toShop('PHEV')" class="ie_box"
                style="display: inline-block;margin-left: 50px;font-size: 30px;width: 300px;height: 150px;">
                <div>
                    PHEV：{{phevProd1.jph? phevProd1.jph:'0'}}/
                    <span [ngStyle]="{'color':phevProd1.hours >= phevProd1.jph?'#0f0':'#f00'}">
                        {{phevProd1.hours? phevProd1.hours:'0'}}
                    </span>
                </div>
                <img class="modification" src="../../../assets/images/PHEV.png" alt="">
            </div>  
            <!-- ubev 新增 -->
            <div (click)="toShop('UBEV')" class="ie_box"
                style="display: inline-block;margin-left: 50px;font-size: 30px;width: 300px;height: 150px;">
                <div>
                    UBEV：{{ubevProd1.jph? ubevProd1.jph:'0'}}/
                    <span [ngStyle]="{'color':ubevProd1.hours >= ubevProd1.jph?'#0f0':'#f00'}">
                        {{ubevProd1.hours? ubevProd1.hours:'0'}}
                    </span>
                </div>
                <img class="modification" src="../../../assets/images/UBEV.png" alt="">
            </div>
        </div>

    </div>

    <!-- <ng-template #notflag> -->
    <div id="box">
        <div class="lunpan_box" id="lunpan_box">
            <div class="lunpan background_1">
                <img id="pan1" src="../../../assets/images/out1.png" alt="">
            </div>
            <div class="lunpan background_2">
                <img id="pan2" src="../../../assets/images/out2.png" alt="">
            </div>
            <div class="lunpan background_3">
                <img id="pan3" src="../../../assets/images/out3.png" alt="">
            </div>
            <div class="lunpan background_4">
                <img id="pan4" src="../../../assets/images/out4.png" alt="">
            </div>
            <div class="lunpan background_5">
                <img id="pan5" src="../../../assets/images/out5.jpg" alt="">
            </div>
            <div class="lunpan background_6">
                <div class="flag_position">
                    <img id="pan6" src="../../../assets/images/out6.png" alt="">
                    <div class="flag_line_box">
                        <div class="flag_line_content">
                            <div class="flag_line flag_line1">
                                <div class="line_po">
                                    <div class="line_mark1"></div>
                                    <div class="line_mark2"></div>
                                    <div class="line_mark3"></div>
                                </div>
                            </div>
                            <div class="flag_line flag_line2">
                                <div class="line_po">
                                    <div class="line_mark1"></div>
                                    <div class="line_mark2"></div>
                                    <div class="line_mark3"></div>
                                </div>
                            </div>
                            <div class="flag_line flag_line3">
                                <div class="line_po">
                                    <div class="line_mark1"></div>
                                    <div class="line_mark2"></div>
                                    <div class="line_mark3"></div>
                                </div>
                            </div>
                            <div class="flag_line flag_line4">
                                <div class="line_po">
                                    <div class="line_mark1"></div>
                                    <div class="line_mark2"></div>
                                    <div class="line_mark3"></div>
                                </div>
                            </div>
                            <div class="flag_line flag_line5">
                                <div class="line_po">
                                    <div class="line_mark1"></div>
                                    <div class="line_mark2"></div>
                                    <div class="line_mark3"></div>
                                </div>
                            </div>
                            <div class="flag_line flag_line6">
                                <div class="line_po">
                                    <div class="line_mark1"></div>
                                    <div class="line_mark2"></div>
                                    <div class="line_mark3"></div>
                                </div>
                            </div>
                            <!-- phev 新增 -->
                            <div class="flag_line flag_line7">
                                <div class="line_po">
                                    <div class="line_mark1"></div>
                                    <div class="line_mark2"></div>
                                    <div class="line_mark3"></div>
                                </div>
                            </div>
                            <!-- ubev 新增 -->  
                            <div class="flag_line flag_line8">
                                <div class="line_po">
                                    <div class="line_mark1"></div>
                                    <div class="line_mark2"></div>
                                    <div class="line_mark3"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flag flag1" (click)="lunpan.showStep('step_1')">
                        <div class="flag_content">
                            <div class="horn horn1"></div>
                            <div class="horn horn2"></div>
                            <div class="horn horn3"></div>
                            <div class="horn horn4"></div>
                            <div class="content_box" id="card1">
                                <div class="card_title"></div>
                                <div class="card_data">
                                    {{gf9Prod.jph? gf9Prod.jph:'0'}}/
                                    <span [ngStyle]="{'color':gf9Prod.hours >= gf9Prod.jph?'#0f0':'#f00'}">
                                        {{gf9Prod.hours? gf9Prod.hours:'0'}}
                                    </span>
                                </div>
                                <img class="modification" src="../../../assets/images/modification3.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="flag flag2" (click)="lunpan.showStep('step_2')">
                        <div class="flag_content">
                            <div class="horn horn1"></div>
                            <div class="horn horn2"></div>
                            <div class="horn horn3"></div>
                            <div class="horn horn4"></div>
                            <div class="content_box" id="card2">
                                <div class="card_title"></div>
                                <div class="card_data">
                                    {{cssProd.jph? cssProd.jph:'0'}}/
                                    <span [ngStyle]="{'color':cssProd.hours >= cssProd.jph?'#0f0':'#f00'}">
                                        {{cssProd.hours? cssProd.hours:'0'}}
                                    </span>
                                </div>
                                <img class="modification" src="../../../assets/images/CSS1.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="flag flag3" (click)="lunpan.showStep('step_3')">
                        <div class="flag_content">
                            <div class="horn horn1"></div>
                            <div class="horn horn2"></div>
                            <div class="horn horn3"></div>
                            <div class="horn horn4"></div>
                            <div class="content_box" id="card3">
                                <div class="card_title"></div>
                                <div class="card_data">
                                    {{css5Prod.jph? css5Prod.jph:'0'}}/
                                    <span [ngStyle]="{'color':css5Prod.hours >= css5Prod.jph?'#0f0':'#f00'}">
                                        {{css5Prod.hours? css5Prod.hours:'0'}}
                                    </span>
                                </div>
                                <img class="modification" src="../../../assets/images/CSS5.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="flag flag4" (click)="lunpan.showStep('step_4')">
                        <div class="flag_content">
                            <div class="horn horn1"></div>
                            <div class="horn horn2"></div>
                            <div class="horn horn3"></div>
                            <div class="horn horn4"></div>
                            <div class="content_box" id="card4">
                                <div class="card_title"></div>
                                <div class="card_data">
                                    {{bev3Prod.jph? bev3Prod.jph:'0'}}/
                                    <span [ngStyle]="{'color':bev3Prod.hours >= bev3Prod.jph?'#0f0':'#f00'}">
                                        {{bev3Prod.hours? bev3Prod.hours:'0'}}
                                    </span>
                                </div>
                                <img class="modification" src="../../../assets/images/BEV3.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="flag flag5" (click)="lunpan.showStep('step_5')">
                        <div class="flag_content">
                            <div class="horn horn1"></div>
                            <div class="horn horn2"></div>
                            <div class="horn horn3"></div>
                            <div class="horn horn4"></div>
                            <div class="content_box" id="card5">
                                <div class="card_title"></div>
                                <div class="card_data">
                                    {{hevProd.jph? hevProd.jph:'0'}}/
                                    <span [ngStyle]="{'color':hevProd.hours >= hevProd.jph?'#0f0':'#f00'}">
                                        {{hevProd.hours? hevProd.hours:'0'}}
                                    </span>
                                </div>
                                <img class="modification" src="../../../assets/images/NCXB.png" alt="">
                                <!-- <img class="modification" src="../../../assets/images/NCXB.png" alt=""> 2025-11-04HEV.PNG调整为NCXB.PNG-->
                            </div>
                        </div>
                    </div>
                    <div class="flag flag6" (click)="lunpan.showStep('step_6')">
                        <div class="flag_content">
                            <div class="horn horn1"></div>
                            <div class="horn horn2"></div>
                            <div class="horn horn3"></div>
                            <div class="horn horn4"></div>
                            <div class="content_box" id="card6">
                                <div class="card_title"></div>
                                <div class="card_data" >
                                    {{gfeProd.jph? gfeProd.jph:'0'}}/
                                    <span [ngStyle]="{'color':gfeProd.hours >= gfeProd.jph?'#0f0':'#f00'}">
                                        {{gfeProd.hours? gfeProd.hours:'0'}}
                                    </span>
                                </div>
                                <img class="modification" src="../../../assets/images/GFE.png" alt="">
                            </div>
                        </div>
                    </div>
                    <!-- phev 新增 -->
                    <div class="flag flag7" (click)="lunpan.showStep('step_7')">
                        <div class="flag_content">
                            <div class="horn horn1"></div>
                            <div class="horn horn2"></div>
                            <div class="horn horn3"></div>
                            <div class="horn horn4"></div>
                            <div class="content_box" id="card7">
                                <div class="card_title"></div>
                                <div class="card_data">
                                    {{phevProd.jph? phevProd.jph:'0'}}/
                                    <span [ngStyle]="{'color':phevProd.hours >= phevProd.jph?'#0f0':'#f00'}">
                                        {{phevProd.hours? phevProd.hours:'0'}}
                                    </span>
                                </div>
                                <img class="modification" src="../../../assets/images/PHEV.png" alt="">
                            </div>
                        </div>
                    </div>
                    <!-- ubev 新增 -->
                    <div class="flag flag8" (click)="lunpan.showStep('step_8')">
                        <div class="flag_content">
                            <div class="horn horn1"></div>
                            <div class="horn horn2"></div>
                            <div class="horn horn3"></div>
                            <div class="horn horn4"></div>
                            <div class="content_box" id="card8">
                                <div class="card_title"></div>
                                <div class="card_data">
                                    {{ubevProd.jph? ubevProd.jph:'0'}}/
                                    <span [ngStyle]="{'color':ubevProd.hours >= ubevProd.jph?'#0f0':'#f00'}">
                                        {{ubevProd.hours? ubevProd.hours:'0'}}
                                    </span>
                                </div>
                                <img class="modification" src="../../../assets/images/UBEV.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="lunpan background_7" (click)="lunpan.opPan()">
                <img id="pan7" src="../../../assets/images/out7.png" alt="">
            </div>

            <div class="step_name_box" (click)="centerPan()">
                <span class="step_name"></span>
            </div>
        </div>
    </div>
    <!-- </ng-template> -->
</div>